<template>
  <el-header class="header-container">
    <div class="header-content">
      <!-- 左侧区域：Logo和系统名称 -->
      <div class="header-left">
        <div class="logo-wrapper">
          <img src="@/assets/logo.png" alt="Logo" class="logo" />
          <h1 class="system-title">语音识别翻译系统</h1>
        </div>
        <el-menu
          mode="horizontal"
          :ellipsis="false"
          class="main-menu"
          :default-active="activeMenu"
          @select="handleMenuSelect"
          :router="true"
        >


          <el-menu-item index="" >首页</el-menu-item>
          <el-menu-item index="upload" >文件语音识别</el-menu-item>
          <el-menu-item index="realtime">实时语音转文字</el-menu-item>
          <el-menu-item index="translation">文本翻译</el-menu-item>
        </el-menu>
      </div>

      <!-- 右侧区域：搜索、通知、用户信息 -->
      <div class="header-right">
        <!-- 搜索框 -->
        <div class="search-box">
          <el-input
            v-model="searchQuery"
            placeholder="搜索..."
            :prefix-icon="Search"
            clearable
            @keyup.enter="handleSearch"
          />
        </div>

        <!-- 主题切换 -->
        <el-tooltip content="切换主题" placement="bottom">
          <div class="theme-switch" @click="toggleTheme">
            <el-icon v-if="isDarkTheme"><Sunny /></el-icon>
            <el-icon v-else><Moon /></el-icon>
          </div>
        </el-tooltip>

        <!-- 消息通知 -->
        <el-badge :value="unreadNotifications" :max="99" class="notification-badge">
          <el-popover
            placement="bottom"
            :width="300"
            trigger="click"
            popper-class="notification-popover"
          >
            <template #reference>
              <el-icon class="notification-icon"><Bell /></el-icon>
            </template>
            <div class="notification-header">
              <span>通知中心</span>
              <el-button text type="primary" @click="markAllAsRead">全部已读</el-button>
            </div>
            <el-scrollbar max-height="300px">
              <div v-if="notifications.length" class="notification-list">
                <div
                  v-for="notification in notifications"
                  :key="notification.id"
                  class="notification-item"
                  :class="{ unread: !notification.read }"
                  @click="handleNotificationClick(notification)"
                >
                  <el-icon :size="20" :class="notification.type">
                    <component :is="getNotificationIcon(notification.type)" />
                  </el-icon>
                  <div class="notification-content">
                    <div class="notification-title">{{ notification.title }}</div>
                    <div class="notification-time">{{ notification.time }}</div>
                  </div>
                </div>
              </div>
              <el-empty v-else description="暂无通知" />
            </el-scrollbar>
          </el-popover>
        </el-badge>

        <!-- 用户信息 -->
        <el-dropdown trigger="click" @command="handleUserCommand">
          <div class="user-profile">
            <el-avatar :size="32" :src="adminAvatar" />
            <span class="username">{{ username }}</span>
            <el-icon><CaretBottom /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">
                <el-icon><User /></el-icon>个人中心
              </el-dropdown-item>
              <el-dropdown-item command="settings">
                <el-icon><Setting /></el-icon>系统设置
              </el-dropdown-item>
              <el-dropdown-item divided command="logout">
                <el-icon><SwitchButton /></el-icon>退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </el-header>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import adminAvatar from '@/assets/haiou.jpg'
import {
  Bell,
  Search,
  Sunny,
  Moon,
  User,
  Setting,
  SwitchButton,
  CaretBottom,
  Message,
  Warning
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()
const searchQuery = ref('')
const isDarkTheme = ref(false)
const activeMenu = ref('dashboard')
const username = ref('管理员')
const userAvatar = ref('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png')


// 通知相关
const unreadNotifications = ref(3)
const notifications = ref([
  {
    id: 1,
    type: 'success',
    title: '更新提醒',
    content: '您有一个新的更新待处理',
    time: '10分钟前',
    read: false
  },
  {
    id: 2,
    type: 'warning',
    title: '系统通知',
    content: '系统将于今晚22:00进行维护',
    time: '1小时前',
    read: false
  },
  {
    id: 3,
    type: 'info',
    title: '消息提醒',
    content: '您有3条未读消息',
    time: '2小时前',
    read: false
  }
])

// 处理菜单选择
const handleMenuSelect = (key: string) => {
  router.push(`/${key}`)
}

// 处理搜索
const handleSearch = () => {
  if (searchQuery.value.trim()) {
    // 实现搜索逻辑
    ElMessage.success(`搜索: ${searchQuery.value}`)
  }
}

// 切换主题
const toggleTheme = () => {
  isDarkTheme.value = !isDarkTheme.value
  // 实现主题切换逻辑
}

// 获取通知图标
const getNotificationIcon = (type: string) => {
  const icons = {
    success: Warning,
    warning: Warning,
    info: Message
  }
  return icons[type as keyof typeof icons] || Message
}

// 处理通知点击
const handleNotificationClick = (notification: any) => {
  notification.read = true
  unreadNotifications.value--
  // 实现通知点击逻辑
}

// 标记所有通知为已读
const markAllAsRead = () => {
  notifications.value.forEach(notification => {
    notification.read = true
  })
  unreadNotifications.value = 0
}

// 处理用户命令
const handleUserCommand = (command: string) => {
  switch (command) {
    case 'profile':
      router.push('/profile')
      break
    case 'settings':
      router.push('/settings')
      break
    case 'logout':
      // 实现登出逻辑
      ElMessage.success('退出登录成功')
      router.push('/login')
      break
  }
}
</script>

<style scoped>
.header-container {
  background-color: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color-light);
  height: 64px !important;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.header-content {
  max-width: 1400px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 40px;
}

.logo-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  height: 32px;
  width: auto;
}

.system-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--el-text-color-primary);
  margin: 0;
}

.main-menu {
  border: none;
  background: transparent;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.search-box {
  width: 240px;
}

.theme-switch {
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.theme-switch:hover {
  background-color: var(--el-fill-color-light);
}

.notification-badge {
  margin-right: 8px;
}

.notification-icon {
  font-size: 20px;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.notification-icon:hover {
  background-color: var(--el-fill-color-light);
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.user-profile:hover {
  background-color: var(--el-fill-color-light);
}

.username {
  font-size: 14px;
  color: var(--el-text-color-primary);
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--el-border-color-light);
}

.notification-list {
  padding: 8px 0;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.notification-item:hover {
  background-color: var(--el-fill-color-light);
}

.notification-item.unread {
  background-color: var(--el-fill-color-lighter);
}

.notification-content {
  flex: 1;
}

.notification-title {
  font-size: 14px;
  color: var(--el-text-color-primary);
  margin-bottom: 4px;
}

.notification-time {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}

:deep(.el-dropdown-menu__item) {
  display: flex;
  align-items: center;
  gap: 8px;
}

:deep(.el-menu--horizontal) {
  border-bottom: none;
}

:deep(.el-menu-item) {
  font-size: 14px;
}

:deep(.el-badge__content) {
  transform: translateY(-50%) translateX(100%);
}
</style>